<template>
	<!-- 商品详情页 -->
	<view class="goods-detail-page">
		<!-- 商品图片区域 -->
		<swiper class="goods-detail-img-area" :autoplay="true" :interval="3000" :circular="true" indicator-dots>
			<swiper-item class="goods-detail-lunbo flex-c-c" v-for="(itemImg ,index) in goodsDetailLunbo" :key="index">
				<image :src="itemImg.src"></image>
			</swiper-item>
		</swiper>
		<!-- 商品标题区域 -->
		<view class="goods-detail-title-area">
			<!-- 商品名字 -->
			<view class="goods-detail-name">{{ goodsDetailmsg.title }}</view>
			<!-- 商品价格区域 -->
			<view class="goods-detail-price-area">
				<!-- 商品销售价 -->
				<view class="goods-detail-market-price">￥{{ goodsDetailmsg.sell_price }}</view>
				<!-- 商品原价 -->
				<view class="goods-detail-original-price">￥{{ goodsDetailmsg.market_price }}</view>
			</view>
		</view>
		<!-- 商品介绍区域 -->
		<view class="goods-recommend-area">
			<text>介绍</text>
			<view class="goods-recommend">{{ goodsDetailmsg.zhaiyao }}</view>
			<view class="goods-recommend-picture" v-html="goodsDetailmsg.content"></view>
		</view>
	</view>
	<!-- 购物车区域 -->
	<view class="shopping-cart-area">
		<!-- 购物车盒子 -->
		<view class="shopping-cart-box" @click="goShoppingCar">
			<!-- 购物车图片 -->
			<image class="shopping-cart-icon" src="/static/image/addCart.png"></image>
			<text class="shopping-cart-text">购物车</text>
		</view>
		<!-- 购物车按钮 -->
		<view class="shopping-cart-btn">
			<!-- 加入购物车 -->
			<button class="add-to-shopping-cart">加入购物车</button>
			<!-- 立即购买 -->
			<button class="go-to-buy" @click="goToBuy">立即购买</button>
		</view>
		<!-- 弹窗 -->
		<view v-if="showPopup" class="popup-mask" @click="closePopup"></view>
		<view :class="['popup-container', showPopup ? 'popup-show' : '']">
			<!-- 弹窗内容 -->
			<view class="popup-content">
				<view class="popup-header">
					<text>操作确认</text>
					<text class="close-btn" @click="closePopup">×</text>
				</view>
				<!-- 弹窗具体内容 -->
				<view class="popup-body">
					<!-- 购物车商品栏 -->
					<view class="shopping-cart-goods-bar">
						<!-- 购物车商品盒子 -->
						<view class="shopping-cart-goods-box">
							<!-- 购物车商品图片 -->
							<image class="shopping-cart-goods-img" src="/static/image/logo.png"></image>
						</view>
						<!-- 购物车商品销售信息 -->
						<view class="shopping-cart-goods-sales-message">
							<!-- 购物车商品价格 -->
							<view class="shopping-cart-goods-price">￥{{ goodsDetailmsg.sell_price }}</view>
							<!-- 购物车商品库存 -->
							<view class="shopping-cart-goods-inventory">剩余{{ goodsDetailmsg.stock_quantity }}件</view>
							<!-- 购物车商品选择 -->
							<view class="shopping-cart-goods-select">请选择</view>
						</view>
					</view>
					<!-- 购买数量区域 -->
					<view class="shopping-cart-goods-num-area">
						<!-- 购买数量 -->
						<view class="shopping-cart-goods-num">购买数量</view>
						<!-- 购买数量盒子 -->
						<view class="shopping-cart-goods-num-box">
							<button class="shopping-cart-goods-dec-btn">-</button>
							<input type="text" class="shopping-cart-goods-input-num" />
							<button class="shopping-cart-goods-inc-btn">+</button>
						</view>
					</view>
					<!-- 购买商品信息区域 -->
					<view class="shopping-cart-area-msg-area">
						<!-- 分隔线区域 -->
						<view class="divider-with-area">
							<!-- 分隔线 -->
							<view class="divider-line">
								<!-- 分隔线文本 -->
								<view class="divider-text">其他信息</view>
							</view>
						</view>
						<!-- 购物车商品信息 -->
						<view class="shopping-cart-area-msg">
							<!-- 商品货号 -->
							<view class="shopping-goods-num">商品货号：{{ goodsDetailmsg.goods_no }}</view>
							<!-- 库存情况 -->
							<view class="shopping-goods-inventory">库存情况：{{ goodsDetailmsg.stock_quantity }}</view>
							<!-- 上架时间 -->
							<view class="shopping-goods-date">上架时间：{{ goodsDetailmsg.add_time }}</view>
						</view>
						<!-- 立即购买按钮 -->
						<view class="shopping-cart-goods-buy-btn">立即购买</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { navigateTo } from '../utils/navigate'
	
	const goodsDetailLunbo = ref([])
	const goodsDetailmsg = ref({})
	const loading = ref(false)
	const id = ref('')

	// 控制弹窗显示
	const showPopup = ref(false);

	// 点击加入购物车
	const addToShoppingCart = () => {
		// 这里可以添加加入购物车的逻辑
		showPopup.value = true;
	};
	
	// 跳转到购物车页面
	const goShoppingCar = () => {
		uni.switchTab({
			url: '/pages/index/shoppingCar'
		})
	}

	// 点击立即购买
	const goToBuy = () => {
		// 这里可以添加立即购买的逻辑
		showPopup.value = true;
	};

	// 关闭弹窗
	const closePopup = () => {
		showPopup.value = false;
	};

	// 点击查看购物车
	const lookCart = () => {}


	import {
		onLoad
	} from '@dcloudio/uni-app'
	import http from '/api/request.js'
	// 导入接口
	import {
		getGoodsDetailLunbo,
		getGoodsDetailmsg
	} from '/api/index'

	// 商品详情页轮播图 
	const fetchGoodsDetailLunbo = async (id) => {
		loading.value = true
		const res = await getGoodsDetailLunbo(id)
		goodsDetailLunbo.value = res.message
	}

	// 商品详情页商品信息
	const fetchGoodsDetailmsg = async (id) => {
		loading.value = true
		const res = await getGoodsDetailmsg(id)
		goodsDetailmsg.value = res.message
		// 将JSON字符串转成图片格式
		console.log(goodsDetailmsg.value.content)
	}

	// 页面生命周期
	onLoad((options) => {
		id.value = options.id // 从页面参数获取商品ID
		fetchGoodsDetailLunbo(id.value)
		fetchGoodsDetailmsg(id.value)
	})
</script>

<style lang="scss">
	// 商品详情页
	.goods-detail-page {
		background-color: #e7e7e7;
		width: 100vw;

		// 商品图片区域
		.goods-detail-img-area {
			background-color: white;
			padding: px2rpx(8);
			margin: px2rpx(8);
			width: px2rpx(343);
			height: px2rpx(240);

			// 商品轮播图
			.goods-detail-lunbo {
				width: px2rpx(245);
				height: px2rpx(240);
			}
		}

		// 商品标题区域
		.goods-detail-title-area {
			width: px2rpx(343);
			height: px2rpx(36);
			background-color: red;
			margin: px2rpx(8);

			// 商品名字
			.goods-detail-name {
				font-size: px2rpx(16);
				font-weight: px2rpx(500);
			}

			// 商品价格区域
			.goods-detail-price-area {
				display: flex;
				background-color: white;

				// 商品销售价
				.goods-detail-market-price {
					margin-right: px2rpx(20);
					font-size: px2rpx(20);
					color: #fa865d;
				}

				// 商品原价
				.goods-detail-original-price {
					text-decoration: line-through;
				}
			}

		}

		// 商品介绍区域
		.goods-recommend-area {
			width: px2rpx(343);
			height: px2rpx(24);
			padding: px2rpx(8);
			margin: px2rpx(8);
			margin: px2rpx(16) 0;

			// 商品介绍
			.goods-recommend {
				background-color: #fa865d;
				font-size: px2rpx(14);
				width: px2rpx(343);
				color: #666;

				// 商品介绍图片
				.goods-recommend-picture {
					width: px2rpx(343);
				}
			}
		}
	}

	// 购物车区域
	.shopping-cart-area {
		display: flex;
		background-color: white;

		// 购物车盒子
		.shopping-cart-box {
			background-color: #ff0000;
			display: flex;
			width: px2rpx(60);
			position: fixed;
			height: px2rpx(42);
			bottom: 0;
			flex-direction: column;
			align-items: center;

			// 购物车图片
			.shopping-cart-icon {
				width: px2rpx(18);
				height: px2rpx(18);
			}

			.shopping-cart-text {}
		}

		// 购物车按钮
		.shopping-cart-btn {
			display: flex;
			position: fixed;
			bottom: 0;
			right: 0;

			// 加入购物车
			.add-to-shopping-cart {
				font-size: px2rpx(14);
				width: px2rpx(158);
				background: linear-gradient(to right, #ff0000, #fff07d);
				height: px2rpx(40);
			}

			// 立即购买
			.go-to-buy {
				font-size: px2rpx(14);
				width: px2rpx(158);
				background: linear-gradient(to right, #fff07d, #ff0000);
				height: px2rpx(40);
			}
		}

		// 弹窗遮罩层
		.popup-mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 999;
		}

		// 弹窗容器 
		.popup-container {
			position: fixed;
			left: 0;
			right: 0;
			bottom: -100%;
			z-index: 1000;
			transition: bottom 0.3s ease-out;
		}

		.popup-show {
			bottom: 0;
		}

		// 弹窗内容 
		.popup-content {
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			padding: 30rpx;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		}

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #eee;
			font-size: 32rpx;
			font-weight: bold;
		}

		.close-btn {
			font-size: px2rpx(40);
			color: #999;
		}

		// 弹窗内部
		.popup-body {
			padding: 40rpx 0;
			height: px2rpx(320);
			text-align: center;
			font-size: 28rpx;

			// 购物车商品栏
			.shopping-cart-goods-bar {
				display: flex;

				// 购物车商品盒子
				.shopping-cart-goods-box {
					width: px2rpx(96);
					height: px2rpx(96);
					padding: px2rpx(12) px2rpx(12) 0 px2rpx(12);

					// 购物车商品图片
					.shopping-cart-goods-img {
						width: px2rpx(96);
						height: px2rpx(96);
					}
				}

				// 购物车商品销售信息
				.shopping-cart-goods-sales-message {
					text-align: start;
					width: px2rpx(70);
					height: px2rpx(96);
					padding: px2rpx(12) px2rpx(12) px2rpx(20) 0;

					// 购物车商品价格
					.shopping-cart-goods-price {
						text-align: start;
						color: #ee0a24;
						font-size: px2rpx(22);
						width: px2rpx(72);
						height: px2rpx(22);
					}

					// 购物车商品库存
					.shopping-cart-goods-inventory {
						width: px2rpx(62);
						padding-top: px2rpx(12);
						font-size: px2rpx(12);
						height: px2rpx(16);
						color: #969799;
					}

					// 购物车商品选择
					.shopping-cart-goods-select {
						width: px2rpx(70);
						height: px2rpx(16);
						font-size: px2rpx(12);
						margin-top: px2rpx(8);
						color: #969799;
					}
				}

			}
		}

		// 购买数量区域
		.shopping-cart-goods-num-area {
			display: flex;
			justify-content: space-between;
			width: px2rpx(343);
			height: px2rpx(30);
			padding: px2rpx(12) px2rpx(16);

			// 购买数量
			.shopping-cart-goods-num {
				width: px2rpx(56);
				height: 30pxpx2rpx(30);
			}

			// 购买数量盒子
			.shopping-cart-goods-num-box {
				display: flex;
				justify-content: center;
				align-items: center;
				width: px2rpx(92);
				height: 30pxpx2rpx(30);

				// 减小按钮
				.shopping-cart-goods-dec-btn {
					width: px2rpx(40);
					height: pxpx2rpx(20);
				}

				// 数字区
				.shopping-cart-goods-input-num {
					width: px2rpx(40);
					height: pxpx2rpx(20);
				}

				// 增加按钮
				.shopping-cart-goods-inc-btn {
					width: px2rpx(40);
					height: pxpx2rpx(20);
				}

			}
		}

		// 购物车商品信息区域
		.shopping-cart-area-msg-area {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: px2rpx(343);
			height: px2rpx(108);

			// 分隔线区域
			.divider-with-area {
				width: px2rpx(343);
				height: px2rpx(24);
				margin: px2rpx(16) 0;
				background-color: #e7e7e7;

				// 分隔线
				.divider-line {
					flex: 1;
					background-color: #f3f3f3;
					// 分隔线文本
					.divider-text {
						color: #999;
						font-size: px2rpx(12);
					}
				}
			}


			// 购物车商品信息
			.shopping-cart-area-msg {
				text-align: start;
				width: px2rpx(343);
				height: px2rpx(42);

				// 商品货号
				.shopping-goods-num {
					width: px2rpx(343);
					font-size: px2rpx(14);
					color: #666;
					height: px2rpx(14);
				}
				// 库存情况
				.shopping-goods-inventory {
					width: px2rpx(343);
					font-size: px2rpx(14);
					color: #666;
					height: px2rpx(14);
				}
				// 上架时间
				.shopping-goods-date {
					width: px2rpx(343);
					font-size: px2rpx(14);
					color: #666;
					height: px2rpx(14);
				}
			}
		}

		// 立即购买按钮
		.shopping-cart-goods-buy-btn {
			display: flex;
			margin-top: px2rpx(16);
			justify-content: center;
			align-items: center;
			width: px2rpx(343);
			font-size: px2rpx(40);
			background-color: #ee0a24;
		}
	}
</style>